// 左移
function zuo() {
    $("img[name='1']").css({
        'position': 'absolute',
        'width': '285px',
        'height': '150px',
        'left': '860px',
        'top': '140px',
        'z-index': '1',
        'transition': '0.5s',
    });
    $("img[name='2']").css({
        'position': 'absolute',
        'width': '285px',
        'height': '150px',
        "left": '0px',
        'top': '140px',
        'z-index': '1',
        'transition': '1s',
    });
    $("img[name='3']").css({
        'position': 'absolute',
        'width': '570px',
        'height': '300px',
        'left': '90px',
        'top': '70px',
        'z-index': '2',
        'transition': '1s',
    });
    $("img[name='4']").css({
        'position': 'absolute',
        'width': '760px',
        'height': '400px',
        'left': '200px',
        'top': '20px',
        'z-index': '4',
        'transition': '1s',
    });
    $("img[name='5']").css({
        'position': 'absolute',
        'width': '570px',
        'height': '300px',
        'left': '490px',
        'top': '70px',
        'z-index': '2',
        'transition': '1s',
    });
    for (i of $("img")) {
        if (i.name == 1) {
            i.name = 5;
        } else {
            i.name = Number(i.name) - 1;
        }
    }

    let index = Number($("img[name = 3]")[0].alt);
    change_dot(index);
}

// //右移
function you() {
    $("img[name='4']").css({
        'position': 'absolute',
        'width': '285px',
        'height': '150px',
        'left': '860px',
        'top': '140px',
        'z-index': '1',
        'transition': '0.5s',
    });
    $("img[name='5']").css({
        'position': 'absolute',
        'width': '285px',
        'height': '150px',
        "left": '0px',
        'top': '140px',
        'z-index': '1',
        'transition': '1s',
    });
    $("img[name='1']").css({
        'position': 'absolute',
        'width': '570px',
        'height': '300px',
        'left': '90px',
        'top': '70px',
        'z-index': '2',
        'transition': '1s',
    });
    $("img[name='2']").css({
        'position': 'absolute',
        'width': '760px',
        'height': '400px',
        'left': '200px',
        'top': '20px',
        'z-index': '4',
        'transition': '1s',
    });
    $("img[name='3']").css({
        'position': 'absolute',
        'width': '570px',
        'height': '300px',
        'left': '490px',
        'top': '70px',
        'z-index': '2',
        'transition': '1s',
    });
    for (i of $("img")) {
        if (i.name == 5) {
            i.name = 1;
        } else {
            i.name = Number(i.name) + 1;
        }
    }

    let index = Number($("img[name = 3]")[0].alt);
    change_dot(index);
}

// // 轮播事件计数器
let time = setInterval("zuo()", 3000);

// //左右点击事件
$("#tpbg1").click(function () {
    you();
    you();
})
$("#tpbg2").click(function () {
    you();
})
$("#tpbg4").click(function () {
    zuo()
})
$("#tpbg5").click(function () {
    zuo();
    zuo();
})

//清空轮播事件
for (i of [$("#tupian"), $("#dot")]) {
    i.mouseover(
        function () {
            clearInterval(time);
        }
    )
    i.mouseout(
        function () {
            time = setInterval("zuo()", 3000);
        }
    )
}

//点击附加事件
for (i of $(".dot")) {
    $(i).click(function () {
        let index = parseInt($(this).attr("name"));

        let pd = index - parseInt($("img[name = '3']").attr("alt"));
        
        if (pd > 0) { 
            for (let i = 0; i < pd; i++) {
                zuo();
            }
        } else if (pd < 0) {
            for(let i = 0; i < -pd; i++){
                you();
            }
        }
        change_dot(index);
    })
}

// 点的轮播事件
function change_dot(index) {
    let dot_px = 0;

    if (index < $(".dot").length) {
        // 侧移方法
        dot_px = 69 + 70 * index + 'px'
    } else {
        dot_px = '69px'
    }

    $(".dot-red").css({
        "left": dot_px,
    })
}